<template>
  <div class="teacherCourseInfo">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程教学大纲</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="">
          <el-date-picker
            v-model="form.academicYear"
            align="right"
            type="year"
            class="max-width"
            placeholder="请选择学年">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="">
          <el-select v-model="form.term" placeholder="请选择学期" class="max-width">
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="overflow-clear">
          <el-button type="primary" class="add-pd-26 float-right">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="courseInfo|concreteCourse(form.academicYear,form.term)"
      style="width: 100%"
      :default-sort="{prop: 'courseID',order:'ascending'}">
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="任课老师"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="teacherTel"
        label="联系方式"
        min-width="140">
      </el-table-column>
      <el-table-column
        prop="textbookName"
        label="所用教材"
        min-width="160">
      </el-table-column>
      <el-table-column
        prop="credit"
        label="学分"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="courseHour"
        label="学时"
        min-width="140"
        sortable>
      </el-table-column>
      <el-table-column
        prop="weeklyHour"
        label="每周学时分配"
        min-width="152"
        sortable>
      </el-table-column>
      <el-table-column
        prop="scoringWay"
        label="记分方式"
        min-width="140">
      </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'studentCourseInfo',
    data() {
      return {
        form: {
          academicYear: '',
          term: ''
        },
        courseInfo: [{
          courseName: '计算机组成原理',
          teacherName:'赵继泽',
          teacherTel:'18435152647',
          textbookName:'计算机组织与结构',
          credit: '4',
          courseHour: '90',
          duration: '60:20:100',
          weeklyHour: '6',
          scoringWay: '百分制',
          academicYear: '2015',
          term: '01'
        },
          {
            courseName: 'java',
            teacherName:'翁自觉',
            teacherTel:'18435153617',
            textbookName:'java基础教程',
            credit: '4',
            courseHour: '90',
            duration: '60:20:100',
            weeklyHour: '6',
            scoringWay: '百分制',
            academicYear: '2014',
            term: '02'
          }],
        currentPage4: 4
      }
    },
    created () {

    },
    methods: {
      res: function () {
        this.$http.get(this.apiUrl)
          .then((res) => {
            this.$set('gridData', res.data)
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
      }
    },
    filters: {
      concreteCourse: function (course, year, term) {
        var msg = [];
        if (year === '' || term === '' || year == null) {
          return course
        }
        for (var i = 0, len = course.length; i < len; i++) {
          console.log(course[i].academicYear)
          if (course[i].academicYear == year.getFullYear() && course[i].term == term) {
            msg.push(course[i])
          }
        }
        return msg
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }
  .add-pd-26{
    padding-left: 1.6em;
    padding-right:1.6em;
  }
</style>
